import React, { Component } from 'react'; 
import ChildCycle2 from '../components/ChildCycle2.jsx';
import Layout1 from '../layouts/Layout1.js';

// 生命周期-演示2
export default class Cycle2 extends Component {
	// 总数据
	state = {
		// 新增-弹窗开头
		mag: 'h111',
		name: 'aaa'
	}
	searchList1 () {
	//searchList1 = () => {
		console.log(11);
		this.setState({
			name: 'bbb'
		})
	}
	// 挂载阶段-完成了React数据的初始化
	constructor (props) {
		console.log('constructor 1', 1);
		super();
	}
	// 挂载阶段-从props中获取state
	static getDerivedStateFromProps (nextProps, prevState) {
		console.log('getDerivedStateFromProps 1', 2);
		return null;
	}
	// 挂载阶段-渲染函数
    render() {
    	console.log('render1', 3);
    	return (
			<Layout1>
				<span onClick={() => this.searchList1()}>name:{this.state.name}</span>
				<ChildCycle2 name={this.state.name}></ChildCycle2>
			</Layout1>
		);
    }
    // 挂载阶段-挂载完成
	componentDidMount () {
		console.log('componentDidMount 1', 4);
	}

	// 更新阶段-是否执行更新
	shouldComponentUpdate (nextProps, nextState) {
		console.log('shouldComponentUpdate 1', 11)
		return true;//true,重调render;false,不重调render
	}
	// 更新阶段-在render之前调用，state已更新
	getSnapshotBeforeUpdate (prevProps, prevState) {
		console.log('getSnapshotBeforeUpdate 1', 12);
		return 1024;
		//return null;
	}
	// 更新阶段-第三个参数从 getSnapshotBeforeUpdate 接收而来
	componentDidUpdate (perProps, perState, params) {
		console.log('componentDidUpdate 1', 13, params);//params:1024
	}
	
};
